<template>
  <div class="metaEquipmentList">
    <div class="metaEquipmentList_searchArea">
      <div class="metaEquipmentList_equType">
        <el-select v-model="equipmentType" placeholder="请选择" class="metaEquipmentListType_select" size="mini" popper-class="metaEquipmentListSearch_pop" @change="equipmentTypeChange" :popper-append-to-body="false">
          <el-option
            v-for="item in equipmentTypeDatas"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="metaEquipmentList_searchBg">
        <div v-if="!showSearchFlag" class="metaEquipmentList_searchImg" @click="showSearch()">
          <i class="metaEquipmentListSearch_btn el-icon-search" style="margin:0"></i>
        </div>
        <div v-else class="metaEquipmentList_searchInput">
          <div class="metaEquipmentListSearch_selectBg">
            <el-select v-model="searchSelectValue" placeholder="请选择" class="metaEquipmentListSearch_select" size="mini" popper-class="metaEquipmentListSearch_pop" :popper-append-to-body="false">
              <el-option
                v-for="item in searchSelectDatas"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="metaEquipmentListSearch_inputBg">
             <!-- @keyup.enter.native="doSearch" -->
            <el-input v-model="searchInputValue" clearable placeholder="请输入" class="metaEquipmentListSearch_input" size="mini" @change="doSearch"></el-input>
          </div>
          <div class="metaEquipmentListSearch_btnBg" @click="hideSearch()">
            <i class="metaEquipmentListSearch_btn el-icon-close"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="metaEquipment_listArea">
      <div class="metaEquipment_listBg">
        <div v-for="(item,index) in equipmentList" :key="item.area_code" class="me_categoryArea">
          <div class="me_categoryTitleArea">
            <div class="me_categoryTitle" @click="areaLocation(index)">( {{item.area_jc}} ) {{item.area_name}}</div>
            <div class="me_categoryArrowArea" @click="openCategory(index)">
              <i v-if="item.open === 'off'" class="el-icon-arrow-right"></i>
              <i v-else class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div v-if="item.open !== 'off'" class="me_areaItem">
            <div :class="lItem.pointId == equipmentId ? 'meAreaItem_equipmentItem equipmentOnChoose' : 'meAreaItem_equipmentItem'" v-for="lItem in item.list" :key="lItem.pointId">
              <div class="meAreaItemEquipment_checkbox" @click="chooseEquipment(lItem.pointId, item.area_code, lItem.wavelength)">
                <img v-if="equipmentId === lItem.pointId" src="@/assets/v4/check_o.png"> 
                <img v-else src="@/assets/v4/check.png"> 
              </div>
              <div v-if="lItem.equipment_type == '1'" class="meAreaItemEquipment_equipmentLogoFbs" @click="chooseEquipment(lItem.pointId, item.area_code, lItem.wavelength)"></div>
              <div v-else-if="lItem.equipment_type == '3'" class="meAreaItemEquipment_equipmentLogoAjs" @click="chooseEquipment(lItem.pointId, item.area_code, lItem.wavelength)"></div>
              <div v-else-if="lItem.equipment_type == '4'" class="meAreaItemEquipment_equipmentLogoGds" @click="chooseEquipment(lItem.pointId, item.area_code, lItem.wavelength)"></div>
              <div class="meAreaItemEquipment_name" @click="chooseEquipment(lItem.pointId, item.area_code, lItem.wavelength)">
                {{ lItem.customizeName && lItem.customizeName !== '' ? lItem.customizeName : lItem.pointName }}
              </div>
              <div v-if="equipmentId != '' && equipmentId != lItem.pointId && equipmentAreaId == item.area_code" :class="checkContrast(lItem.pointId) ? 'meAreaItemEquipment_contrast_o' : 'meAreaItemEquipment_contrast'" @click="addContrast(lItem.pointId)">对比</div>
              <!-- 1在线2调试3维修4报警 -->
              <template v-if="!statusChangeFlag">
                <div v-if="getEquipmentStatus(lItem,lItem.pointId) == '4' || getEquipmentStatus(lItem,lItem.pointId) == '41'" class="meAreaItemEquipment_status color_bg_red color_shadow_red"></div>
                <div v-else-if="getEquipmentStatus(lItem,lItem.pointId) == '1' || getEquipmentStatus(lItem,lItem.pointId) == '11' || getEquipmentStatus(lItem,lItem.pointId) == '5'" class="meAreaItemEquipment_status color_bg_blue color_shadow_blue"></div>
                <div v-else-if="getEquipmentStatus(lItem,lItem.pointId) == '2' || getEquipmentStatus(lItem,lItem.pointId) == '21'" class="meAreaItemEquipment_status color_bg_orange color_shadow_orange"></div>
                <div v-else-if="getEquipmentStatus(lItem,lItem.pointId) == '3' || getEquipmentStatus(lItem,lItem.pointId) == '31'" class="meAreaItemEquipment_status color_bg_yellow color_shadow_yellow"></div>
                <!-- <div v-else-if="getEquipmentStatus(lItem,lItem.pointId) == '5'" class="meAreaItemEquipment_status color_bg_orange color_shadow_orange"></div> -->
                <div v-else class="meAreaItemEquipment_status color_bg_orange color_shadow_orange"></div>
              </template>
              <!-- <div v-if="lItem.on_type == '1'" class="meAreaItemEquipment_status color_bg_blue color_shadow_blue"></div>
              <div v-else-if="lItem.on_type == '2'" class="meAreaItemEquipment_status color_bg_orange color_shadow_orange"></div>
              <div v-else-if="lItem.on_type == '3'" class="meAreaItemEquipment_status color_bg_yellow color_shadow_yellow"></div>
              <div v-else-if="lItem.on_type == '4'" class="meAreaItemEquipment_status color_bg_red color_shadow_red"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import deepClone from '../utils/deepClone'
export default {
  name: 'metaEquipmentList',
  props: {
    datas: {
      type: Object,
      default: () => {
        return {}
      }
    },
    etype: {
      type: String,
      default: '10'
    }
  },
  data () {
    return {
      equipmentList: [],
      equipmentId: '',
      equipmentAreaId: '',
      showSearchFlag: false,
      searchSelectValue: 'name',
      searchInputValue: '',
      searchSelectDatas: [{
        value: 'name',
        label: '名称'
      },{
        value: 'addr',
        label: '区域'
      }],
      equipmentType: '',
      equipmentTypeDatas: [{
        value: '10',
        label: '固定式设备'
      },{
        value: '20',
        label: '便携式设备'
      }],
      // ,{
      //   value: '30',
      //   label: '岸基式设备'
      // },{
      //   value: '40',
      //   label: '管道式设备'
      // },
      contrastIdList: [],
      statusData: {},
      statusChangeFlag: false
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData(eTypeChange) {
      this.statusChangeFlag = false
      if(!eTypeChange) {
        this.equipmentType = this.etype
      }
      this.equipmentList = []
      if(Object.keys(this.datas).length > 0) {
        this.equipmentList = deepClone(this.datas[this.equipmentType])
      }
    },
    equipmentTypeChange() {
      this.initData(true)
      this.doSearch()
      this.$emit('changeEqType', this.equipmentType)
    },
    
    showSearch() {
      this.showSearchFlag = true
    },
    hideSearch() {
      this.showSearchFlag = false
    },
    doSearch(e) {
      if(this.searchInputValue !== '') {
        if(this.searchSelectValue === 'name') {
          let dataList = []
          for(let i in this.datas[this.equipmentType]) {
            let eList = []
            for(let j in this.datas[this.equipmentType][i].list) {
              let listItem = this.datas[this.equipmentType][i].list[j]
              if(listItem.pointName.search(this.searchInputValue) != -1) {
                eList.push(listItem)
              }
            }
            if(eList.length > 0) {
              let item = deepClone(this.datas[this.equipmentType][i])
              item.list = eList
              dataList.push(item)
            }
          }
          this.equipmentList = deepClone(dataList)
        }else if(this.searchSelectValue === 'addr') {
          let dataList = []
          for(let i in this.datas[this.equipmentType]) {
            let checkStr = "（" + this.datas[this.equipmentType][i].area_jc + "）" + this.datas[this.equipmentType][i].area_name
            if(checkStr.search(this.searchInputValue) != -1) {
              dataList.push(this.datas[this.equipmentType][i])
            }
          } 
          this.equipmentList = deepClone(dataList)
        }
      }else {
        this.equipmentList = deepClone(this.datas[this.equipmentType])
      }
    },
    areaLocation(i) {
      if(this.equipmentList[i].list.length > 0) {
        let areaPos = [this.equipmentList[i].list[0].alert.longitude, this.equipmentList[i].list[0].alert.latitude]
        this.$emit('areaLocation',areaPos)
      }
    },
    openCategory(i) {
      let data = deepClone(this.equipmentList)
      // data[i].open = !data[i].open
      if(data[i].open && data[i].open === 'off') {
        data[i].open = 'on'
      }else {
        data[i].open = 'off'
      }
      this.equipmentList = []
      this.equipmentList = deepClone(data)
    },
    chooseEquipment(eId, areaId, wavelength) {
      if(this.equipmentId == eId) {
        this.equipmentId = ''
        this.equipmentAreaId = ''
        this.contrastIdList = []
      }else {
        if(this.equipmentAreaId != areaId) {
          this.contrastIdList = []
        }else {
          for(let i in this.contrastIdList) {
            if(this.contrastIdList[i] == eId) {
              this.contrastIdList.splice(i,1)
              break
            }
          }
        }
        this.equipmentAreaId = areaId
        this.equipmentId = eId
      }
      this.$emit('onChoose',this.equipmentId, wavelength)
      this.$emit('onVsChange',this.contrastIdList)
    },
    checkContrast(eId) {
      for(let i in this.contrastIdList) {
        if(this.contrastIdList[i] === eId) {
          return true
        }
      }
      return false
    },
    addContrast(eId) {
      let hasIndex = -1
      for(let i in this.contrastIdList) {
        if(eId === this.contrastIdList[i]) {
          hasIndex = i
          break
        }
      }
      if(hasIndex == -1) {
        //不存在 添加
        this.contrastIdList.push(eId)
      }else {
        //存在 剔除
        this.contrastIdList.splice(hasIndex, 1); 
      }
      this.$emit('onVsChange',this.contrastIdList)
    },
    getEquipmentStatus(item,kid) {
      let status = item.on_type + ''
      if(this.statusData[item[kid]]) {
        if(this.statusData[item[kid]].status) {
          status = this.statusData[item[kid]].status
        }
        if(this.statusData[item[kid]].workstatus && this.statusData[item[kid]].workstatus == '1') {
          status += this.statusData[item[kid]].workstatus
        }
      }
      return status
    },
    changeEquipmentStatus(status) {
      this.statusChangeFlag = true
      for(let key in status) {
        this.statusData[key] = {}
        for(let sKey in status[key]) {
          this.statusData[key][sKey] = status[key][sKey]
        }
      }
      //   // this.statusData = status
      this.statusChangeFlag = false
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.metaEquipmentList {
  width: 100%;
  height:  100%;
}
.metaEquipmentList_searchArea {
  width: 100%;
  height: 40px;
  display: flex;
}
.metaEquipmentList_equType {
  flex: 5;
  height: 100%;
  box-sizing: border-box;
  padding: 0 5px 0 11px;
  display: flex;
  align-items: center;
}
.metaEquipmentList_searchBg {
  flex: 8;
  height: 100%;
  box-sizing: border-box;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.metaEquipmentListType_select {
  height: 35px;
  width: 100%;
  border-radius: 35px;
}
.metaEquipmentList_searchImg {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background: rgba(18, 13, 58, 0.3);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.metaEquipmentList_searchInput {
  width: 100%;
  height: 35px;
  border-radius: 35px;
  /* overflow: hidden; */
  display: flex;
  color: white;
  box-sizing: border-box;
  border: 1px solid #A5C0D2;
}
.metaEquipmentListSearch_selectBg {
  flex: 2;
  height: 100%;
}
.metaEquipmentListSearch_inputBg {
  flex: 3;
  height: 100%;
}
.metaEquipmentListSearch_btnBg {
  flex: 1;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: rgba(18, 13, 58, 0.3);
}
.metaEquipmentListSearch_btn {
  color: white;
  margin-right: 10px;
}
.metaEquipmentListSearch_select {
  height: 100%;
}
.metaEquipmentListSearch_input {
  height: 100%;
}
.metaEquipment_listArea {
  width: 100%;
  height: calc(100% - 40px);
  box-sizing: border-box;
  padding: 5px 20px 15px 0;
  overflow: hidden;
}
.metaEquipment_listBg {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.metaEquipment_listBg::-webkit-scrollbar{
  width: 2px;
  background: #020E3D;
}
.metaEquipment_listBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.me_categoryArea {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
.me_categoryTitleArea {
  width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  height: 40px;
  cursor:pointer;
  display: flex;
}
.me_categoryTitle {
  height: 100%;
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
  color: #CCF2FF;
}
.me_categoryArrowArea {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.me_areaItem {
  width: 100%;
  float: left;
}
.meAreaItem_equipmentItem {
  width: 100%;
  float: left;
  height: 45px;
  box-sizing: border-box;
  padding: 0 5px 0 22px;
  display: flex;
  align-items: center;
}
.equipmentOnChoose {
  background-image: url("~@/assets/v4/equOnChoose.png");
  background-size: 100% 100%;
  /* background-image: linear-gradient(to right, rgba(39, 95, 128, 1) , rgba(39, 95, 128, 0)); */
}
.meAreaItem_equipmentItem:hover {
  background-size: 100% 100%;
  background-image: url("~@/assets/v4/equOnChoose.png");
}
.meAreaItemEquipment_checkbox {
  width: 35px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.meAreaItemEquipment_checkbox >img {
  width: 16px;
  height: 16px;
}
.meAreaItemEquipment_name {
  flex: 3;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #CCF2FF;
  font-size: 16px;
  box-sizing: border-box;
  padding-left: 2px;
}
.equipmentOnChoose .meAreaItemEquipment_equipmentLogoFbs{
  background: url('~@/assets/kanban/equLogo_fbs_o.png');
}
.equipmentOnChoose .meAreaItemEquipment_equipmentLogoAjs{
  background: url('~@/assets/kanban/equLogo_ajs_o.png');
}
.equipmentOnChoose .meAreaItemEquipment_equipmentLogoGds{
  background: url('~@/assets/kanban/equLogo_gds_o.png');
}
.meAreaItem_equipmentItem:hover .meAreaItemEquipment_equipmentLogoFbs {
  background: url('~@/assets/kanban/equLogo_fbs_o.png');
}
.meAreaItem_equipmentItem:hover .meAreaItemEquipment_equipmentLogoAjs {
  background: url('~@/assets/kanban/equLogo_ajs_o.png');
}
.meAreaItem_equipmentItem:hover .meAreaItemEquipment_equipmentLogoGds {
  background: url('~@/assets/kanban/equLogo_gds_o.png');
}
.meAreaItemEquipment_equipmentLogoFbs {
  width: 30px;
  height: 30px;
  background: url('~@/assets/kanban/equLogo_fbs.png');
  background-size: 100% 100%;
  cursor: pointer;
}
.meAreaItemEquipment_equipmentLogoAjs {
  width: 30px;
  height: 30px;
  background: url('~@/assets/kanban/equLogo_ajs.png');
  background-size: 100% 100%;
  cursor: pointer;
}
.meAreaItemEquipment_equipmentLogoGds {
  width: 30px;
  height: 30px;
  background: url('~@/assets/kanban/equLogo_gds.png');
  background-size: 100% 100%;
  cursor: pointer;
}
.meAreaItemEquipment_contrast {
  flex: 1;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  color: #6a889a;
}
.meAreaItemEquipment_contrast_o {
  flex: 1;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  color: #4FE5FF;
}
.meAreaItemEquipment_status {
  margin: 0 11px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
}
</style>